<template>
	<view>
		<view class="example-body">
			<uni-steps tap="test" :options="list1" active-color="#007AFF" :active="active" />
		</view>

		<view class="cur-status">
			<view class="block base">
				<view class="block-title">商品信息</view>
				<view class="block-content">
					<view class="info">
						<image mode="aspectFit" :src="detail.url"></image>

						<view class="base">
							<view class="title">
								<view>名称：{{ detail.productName }}</view>
							</view>
							<view class="color">
								<view>商品单价：{{ detail.unitPrice }}</view>
							</view>
						</view>
					</view>

					<!-- <view class="content">
					<view class="content-title">{{detail.title}}</view>
					
					<view class="content-attr"><view>材质：</view>{{detail.val1}}</view>
					<view class="content-attr"><view>规格：</view>{{detail.val2}}</view>
					<view class="content-attr"><view>风格：</view>{{detail.val3}}</view>
					<view class="content-attr"><view>品牌：</view>{{detail.val4}}</view>
					<view class="content-attr"><view>颜色：</view>{{detail.val5}}</view>
					
				</view> -->
				</view>
			</view>

			<view class="block">
				<view class="block-title">客户信息</view>
				<view class="block-content">
					<view class="content-attr">
						<view>预约安装日期：</view>
						{{ detail.appointMeasureTime }}
					</view>
					<view class="content-attr">
						<view>收货人姓名：</view>
						{{ detail.receiverName }}
					</view>
					<view class="content-attr">
						<view>收货人电话：</view>
						{{ detail.receiverPhone }}
					</view>
					<view class="content-attr">
						<view>收货地址：</view>
						{{ detail.deliveryAddress }}
					</view>
					<!-- <view class="content-attr">
						<view>详细地址：</view>
						{{ detail.receiverPhone }}
					</view> -->
				</view>
			</view>

			<!-- <view class="block">
				<view class="block-title">工人测量信息</view>
				<view class="block-content">
					<view class="content-attr">
						<view>长度：</view>
						{{ detail.receiverPhone }}
					</view>
					<view class="content-attr">
						<view>高度：</view>
						{{ receiverPhone }}
					</view>
					<view class="content-attr">
						<view>计费面积：</view>
						{{ detail.receiverPhone }}
					</view>
					<view class="content-attr">
						<view>预计人工费：</view>
						{{ detail.receiverPhone }}
					</view>
				</view>
			</view> -->
			<view class="block">
				<view class="block-title">复尺信息</view>
				<view class="block-content">
					
					
					
					<form @submit="formSubmit" @reset="formReset">
						<textarea v-model="remarks" placeholder-style="color:#F76260" placeholder="输入测量信息"/>
<!-- 						<template v-if="detail.measureType == 1">
							<input type="number" name="width" class="uni-input" v-model="width" placeholder="请输入宽度" @input="cal_val" />mm

							<input type="number" name="height" class="uni-input" v-model="height" placeholder="请输入高度" @input="cal_val" />mm
						</template>
						<template v-if="detail.measureType == 2">
							<input type="number" name="widthA" class="uni-input" v-model="widthA" placeholder="请输入宽度A" @input="cal_val" />mm

							<input type="number" name="heightA" class="uni-input" v-model="heightA" placeholder="请输入高度A" @input="cal_val" />mm
							<input type="number" name="widthB" class="uni-input" v-model="widthB" placeholder="请输入宽度B" @input="cal_val" />mm

							<input type="number" name="heightB" class="uni-input" v-model="heightB" placeholder="请输入高度B" @input="cal_val" />mm
						</template>

						<view class="block-content">
							<view class="content-attr">
								<view>计费面积：</view>
								<view>{{ cal_area }}㎡</view>
							</view>
							<view>(计费面积 = （ 长度 X 高度 ）)</view>
							<view class="content-attr">
								<view>材料费用：</view>
								¥{{ material_cost }}
							</view>
							<view class="content-attr">
								<view>人工费用：</view>
								¥{{ worker_cost }}
							</view>
							<view class="content-attr">
								<view>总价：</view>
								¥{{ total_price }}
							</view>
						</view>


						<view v-for="(item, index) in detail.measureList" class="product-total" :index="index">
							<view>{{ item.name }} :</view>
							<view><input class="input" type="text" :id="index" :name="item.paramName" :value="item[item.paramName]"
								 bindchange="changInput" /></view>
						</view> -->

						<view class="uni-btn-v"><button form-type="submit">复尺完成</button></view>
					</form>
				
				</view>
			</view>

			<!-- <view class="order-btn" @tap="done">
				复尺完成
			</view> -->
		</view>
	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue';
	import uniSection from '@/components/uni-section/uni-section.vue';
	import config from '@/common/config.js';
	var graceChecker = require('../../common/graceChecker.js');
	export default {
		components: {
			uniSection,
			uniSteps,
		},
		data() {
			return {
				active: 1,
				list1: [{
						title: '待支付',
						desc: '2018-11-11'
					},
					{
						title: '待测量',
						desc: '2018-11-13'
					},
					{
						title: '待收货',
						desc: '2018-11-14'
					},
					{
						title: '待安装',
						desc: '2018-11-15'
					},
					{
						title: '已完成',
						desc: '2018-11-18'
					}
				],
				list2: [{
						title: '待支付',
						desc: '2018-11-11'
					},
					{
						title: '待发货',
						desc: '2018-11-14'
					},
					{
						title: '待收货',
						desc: '2018-11-15'
					},
					{
						title: '已完成',
						desc: '2018-11-18'
					}
				],
				detail: {
					src: 'http://www.gdredoak.com/upload/201810/16/201810161616381484.jpg',
					title: '落地窗',
					val1: '断桥铝',
					val2: '断桥铝',
					val3: '欧式',
					val4: '凤铝',
					val5: '白色',

					val6: '2020-06-30',
					val7: '江苏省  苏州市  吴江区',
					val8: '千邑悦庭11栋305',

					val9: '长度',
					val0: '高度',
					val1: '计费面积',
					val2: '预计人工费'
				},
				measureType: 1,
				cal_area: '',
				material_cost: '',
				worker_cost: '',
				total_price: '',

				cal_areaA: '',
				cal_areaB: '',
				material_cost: '',
				worker_costA: '',
				worker_costB: '',
				total_price: '',

				orderSubId: '',
				orderItemId: '',
				measureAttributes: '',

				width: '',
				height: '',

				widthA: '',
				heightA: '',

				widthB: '',
				heightB: '',
				
				remarks:""
			};
		},
		onLoad(options) {
			debugger;
			this.get_detail(options.id);
		},
		methods: {
			init() {
				var that = this;
				this.get_detail(options.id);
			},
			changInput: function(e) {
				debugger;
			},
			cal_val: function() {
				debugger;
				var that = this;
				if (that.detail.measureType == 1) {
					that.worker_cost = 0; //安装费用默认为0
					//1.计算安装费用
					if (that.detail.containInstall == 0) {
						//不包安装
						if ('平米' == that.detail.installUnit) {
							that.worker_cost = that.width * that.height * that.detail.installPrice;
							that.cal_area = that.width * that.height;
						} else {
							that.worker_cost = that.detail.installPrice;
						}
					}

					//商品
					if ('平米' == that.detail.unitName) {
						//计算;
						that.material_cost = that.width * that.height * that.detail.unitPrice; //材料费用
						that.total_price = that.material_cost + that.worker_cost; //总价
					} else {
						that.material_cost = that.detail.qty * that.detail.unitPrice; //材料费用
						that.total_price = that.material_cost + that.worker_cost; //总价
					}

					that.measureAttributes = [{
							id: 1,
							name: '宽度',
							paramName: 'width',
							width: that.width
						},
						{
							id: 2,
							name: '高度',
							paramName: 'height',
							height: that.height
						}
					];
				}
				if (that.detail.measureType == 2) {
					that.worker_cost = 0; //安装费用默认为0
					//1.计算安装费用
					if (that.detail.containInstall == 0) {
						//不包安装
						if ('平米' == that.detail.installUnit) {
							that.worker_costA = that.width * that.height * that.detail.installPrice;
							that.cal_areaA = that.width * that.height;
						} else {
							that.worker_costA = that.detail.installPrice;
						}
					}

					//商品
					if ('平米' == that.detail.unitName) {
						//计算;
						that.material_cost = (that.widthA * that.heightA + that.widthB * that.heightB) * that.detail.unitPrice; //材料费用
						that.total_price = that.material_cost + that.worker_cost; //总价
					} else {
						that.material_cost = that.detail.qty * that.detail.unitPrice; //材料费用
						that.total_price = that.material_cost + that.worker_cost; //总价
					}

					that.measureAttributes = [{
							id: 1,
							name: 'A面宽度',
							paramName: 'widthA',
							widthA: that.widthA
						},
						{
							id: 2,
							name: 'A面高度',
							paramName: 'heightA',
							heightA: that.heightA
						},
						{
							id: 1,
							name: 'B面宽度',
							paramName: 'widthB',
							widthB: that.widthB
						},
						{
							id: 2,
							name: 'B面高度',
							paramName: 'heightB',
							heightB: that.heightB
						},
					];
				}

			},
			get_detail(id) {


				this.orderSubId = id;

				debugger;
				var that = this;
				uni.request({
					url: config.measureDetailUrl + id, //仅为示例，并非真实接口地址。
					method: 'GET',

					header: {
						//'Content-Type': 'application/json', //自定义请s求头信息
						token: uni.getStorageSync('userdata').accesstoken
					},
					success: res => {
						debugger;

						if (res.data.data) {
							res.data.data.measureType = 1;
							
							
							
							that.detail = res.data.data;
							
							//test
							that.detail.installPrice = 1;
							that.detail.installUnit = '平米';
							that.detail.containInstall=0;
							

							that.orderItemId = that.detail.orderItemId;

						}
					}
				});
			},
			change() {
				if (this.active < this.list1.length - 1) {
					this.active += 1;
				} else {
					this.active = 0;
				}
			},
			test(e) {
				debugger;
			},
			formSubmit: function(e) {
				debugger;
				var that = this;
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
				//定义表单规则

				var rule = '';

				// if (that.detail.measureType == 1) {
				// 	rule = [{
				// 			name: 'width',
				// 			checkType: 'notnull',
				// 			checkRule: '',
				// 			errorMsg: '请填写宽度'
				// 		},
				// 		{
				// 			name: 'height',
				// 			checkType: 'notnull',
				// 			checkRule: '',
				// 			errorMsg: '请填写高度'
				// 		}
				// 		//{name:"difference", checkType : "in", checkRule:"客户确定补差价,误差较小，无需客户补差价",  errorMsg:"请选择性别"},
				// 	];
				// }

				// if (that.detail.measureType == 2) {
				// 	rule = [{
				// 			name: 'widthA',
				// 			checkType: 'notnull',
				// 			checkRule: '',
				// 			errorMsg: '请填写宽度A'
				// 		},
				// 		{
				// 			name: 'heightB',
				// 			checkType: 'notnull',
				// 			checkRule: '',
				// 			errorMsg: '请填写高度A'
				// 		},
				// 		{
				// 			name: 'widthB',
				// 			checkType: 'notnull',
				// 			checkRule: '',
				// 			errorMsg: '请填写宽度B'
				// 		},
				// 		{
				// 			name: 'heightB',
				// 			checkType: 'notnull',
				// 			checkRule: '',
				// 			errorMsg: '请填写高度B'
				// 		}
				// 		//{name:"difference", checkType : "in", checkRule:"客户确定补差价,误差较小，无需客户补差价",  errorMsg:"请选择性别"},
				// 	];
				// }

				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					uni.showModal({
						title: '提示',
						content: '确定复尺完成吗？',
						showCancel: false,
						confirmText: '确定',
						success: function(res) {
							uni.request({
								url: config.updateProductUrl, //仅为示例，并非真实接口地址。
								method: 'POST',
								data: {
									//orderSubId: that.orderSubId,
									orderItemId: that.orderItemId,
									//measureAttributes: that.measureAttributes
									remarks:that.remarks
								},
								header: {
									//'Content-Type': 'application/json', //自定义请s求头信息
									token: uni.getStorageSync('userdata').accesstoken
								},
								success: res => {
									
									if (res.status==1) {
										uni.navigateTo({
											url: 'install'+'?id='+that.orderItemId
										});
									
									}
									
									
									
								}
							});
						}
					});
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: 'none'
					});
				}
			},
			formReset: function(e) {
				console.log('清空数据');
			},
			done: function(e) {}
		}
	};
</script>

<style>
	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}

	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #ffffff;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007aff;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}

	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007aff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}

	uni-view {
		font-size: 12px;
	}

	image {
		width: 200rpx;
		height: 200rpx;
		margin: 0 30rpx;
	}

	.block {
		padding: 20rpx;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.block-title {
		font-weight: bolder;
		margin-bottom: 20rpx;
	}

	.block-content {
		display: flex;
		flex-direction: column;
	}

	.base .block-content {
		display: flex;
		flex-direction: row;
	}

	.content {}

	.content-title {}

	.content-attr {
		color: #9f9e9e;
		float: left;
		width: 80%;
	}

	.content-attr view {
		float: left;
		width: 40%;
		text-align: right;
	}

	.base .content-attr {
		width: 45%;
	}

	.base .content-attr view {
		width: auto;
	}

	.order-btn {
		width: 100%;
		height: 90rpx;
		position: fixed;
		bottom: 0px;
		text-align: center;
		background-color: #ff5722;
		color: #fff;
		line-height: 90rpx;
		font-size: 1rem;
	}
</style>
